<template>
    <div>
        <div class="head">
            <van-icon name="arrow-left" class="left" @click="herf" />
            <form action="/">
                <van-search v-model="value" placeholder="搜一下你感兴趣的内容吧" @search="onSearch" @cancel="onCancel" />
            </form>
            <span @click="search">搜索</span>
        </div>
        <ul class="content">
            <li v-for="item in searchlist" :key="item.id">
                <img :src="item.img" alt="">
                <p> {{ item.title }}</p>
                <div class="hezi">
                    <span>￥{{ item.price }}</span>
                    <span>￥{{ item.old_price }}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
import { Notify } from 'vant';
export default {
    data() {
        return {
            value: '',
            searchlist: [],
            historylist: [],
        };
    },

    mounted() {

    },

    methods: {
        onSearch(val) {

        },
        onCancel() {
        },
        herf() {
            history.go(-1)
        },
        search() {
            axios({
                url: 'http://192.168.10.143:3000/goods?q=' + this.value,
                method: 'get'
            }).then(res => {
                if (res.data.length) {
                    this.searchlist = res.data
                    console.log(this.searchlist, "res");
                } else {
                    Notify({ type: 'warning', message: '抱歉，没有此内容哦' });
                }

            })
            this.historylist = [...this.historylist, this.value]
        }
    },
};
</script>

<style scoped lang="scss">
.content {
    display: flex;
    flex-wrap: wrap;

    li {
        width: 48%;
        height: 330px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        background: #fff;
        margin-left: 6px;
        margin-bottom: px;
        margin-top: 10px;

        img {
            width: 100%;
            height: 100%;
        }

        p {
            font-size: 12px;
            color: #303030;
        }

        .hezi {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                color: #363636;
                font-size: 16px;
            }

            span:nth-of-type(2) {
                font-weight: normal;
                text-decoration: line-through;
                color: #979797;
                font-size: 14px;
            }
        }
    }
}
</style>